<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient @sendinfo='getInfo'></ChangePatient>
		<!-- 状态栏 -->
		<view class="statusbar">
			<view class="status" :class="{active:statusFree==0}" @click="changesta(0)">
				待缴费
			</view>
			<view class="status" :class="{active:statusFree==1}" @click="changesta(1)">
				已缴费
			</view>
		</view>
		<!-- 状态内容切换 -->
		<view class="status_content">
			<!-- 待缴费 -->
			<view class="Pending_payment" v-if="statusFree==0">
				<view class="paymentlist" v-for="(item,index) in statelists" :key="index">
					<view class="registration">
						<view class="code">
							登记号：{{item.registrationcode}}
						</view>
						<l-checkbox v-model="item.state" icon="circle" @change="sta(index)"></l-checkbox>
					</view>
					<view class="registrationInfo">
						<view class="info">
							就诊科室：{{item.depart}}
						</view>
						<view class="info">
							开单医生：{{item.doctor}}
						</view>
						<view class="info">
							开单时间：2020-01-01 10:20:36
						</view>
						<view class="priceInfo">
							<view class="price">
								开单金额：<text style="color: #FF4D4F;">￥{{item.price.toFixed(2)}}</text>
							</view>
							<view class="details" @click="seeDetail">
								缴费明细 >
							</view>
						</view>
					</view>
				</view>
				<!-- 待缴费明细底部弹出层 -->
				<uni-popup ref="popupfree" type="bottom" background-color="#fff" class="popupFree">
					<view class="popup-content">
						<view class="title">
							缴费明细
						</view>
						<image class="close" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1063.svg" mode="widthFix" @click="Detailsclose"></image>
						<view class="paymentlists">
							<view class="payment_list">
								<view class="paykinds">
									<view class="kind">
										<view class="kindlogo">
											药
										</view>
										<view class="kinds">
											药品
										</view>
									</view>
									<view class="subtotal">
										小计：￥100.13
									</view>
								</view>
								<view class="lists">
									<view class="list" v-for="n in 5" :key="n">
										<view class="name">
											1、葆宫止血颗粒*3盒
										</view>
										<view class="price">
											￥50.13
										</view>
									</view>
								</view>
							</view>
							<view class="payment_list">
								<view class="paykinds">
									<view class="kind">
										<view class="kindlogo" style="background-color: rgba(255, 251, 230, 1);color: #FAAD14;">
											查
										</view>
										<view class="kinds">
											检查
										</view>
									</view>
									<view class="subtotal">
										小计：￥420.00
									</view>
								</view>
								<view class="lists">
									<view class="list" v-for="n in 2" :key="n">
										<view class="name">
											1、CT
										</view>
										<view class="price">
											￥200.00
										</view>
									</view>
								</view>
							</view>
							
						</view>
						<view class="amounts">
							合计：￥520.13
						</view>
					</view>
				</uni-popup>
				<!-- 待缴费底部结算栏 -->
				<view class="settlement">
					<l-checkbox v-model="checked" icon="circle" class="allselect" @change="allcheck">
						<view class="allcheck">
							全选（已选 <text style="color:#1677FF;">{{selectNum}}</text> 张）
						</view>
						<view class="total">
							合计：
							<text style="color:#FF4D4F;">￥{{subTotal.toFixed(2)}}</text>
						</view>
					</l-checkbox>
					<button class="gofree"  @click="goFree">去缴费</button>
				</view>
			</view>
			<!-- 已缴费 -->
			<view class="Paid_already" v-if="statusFree==1">
				<view class="prompt">
					默认查询近3个月内的缴费订单
				</view>
				<view class="paylists">
					<view class="paylist" v-for="(item,index) in statelists" :key="index">
						<view class="registration">
							<view class="code">
								登记号：{{item.registrationcode}}
							</view>
							<view class="pay_status" v-if="item.status=='已缴费'" style="background-color: rgba(230, 255, 251, 1);color: #13C2C2;">
								{{item.status}}
							</view>
							<view class="pay_status" v-else style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
								{{item.status}}
							</view>
						</view>
						<view class="registrationInfo">
							<view class="info">
								就诊科室：{{item.depart}}
							</view>
							<view class="info">
								开单医生：{{item.doctor}}
							</view>
							<view class="info">
								开单时间：2020-01-01 10:20:36
							</view>
							<view class="info">
								开单金额：￥{{item.price.toFixed(2)}}
							</view>
							<view class="info">
								订单号：{{item.ordercode}}
							</view>
							<view class="godetails" @click="godetails">
								缴费详情 >
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const statelists = reactive([])
	onLoad(()=>{
		api('/apppayfrees',{
			userid:uni.getStorageSync('userid'),
			statusFree:statusFree.value,
			memberid:memberid.value
		}).then(res=>{
			console.log(res.dataes)
			statelists.push(...res.dataes)
		}).catch(err=>{
			console.log(err)
		})
	})
	
	// 缴费状态切换
	const statusFree = ref(0)
	const changesta = (sta) => {
		statusFree.value = sta
		statelists.splice(0)
		api('/apppayfrees',{
			userid:uni.getStorageSync('userid'),
			statusFree:statusFree.value,
			memberid:memberid.value
		}).then(res=>{
			console.log(res.dataes)
			statelists.push(...res.dataes)
		}).catch(err=>{
			console.log(err)
		})
	}
	// 待缴费
	const checked=ref(false)	//全选状态
	const Payarr = reactive([])	//进行缴费操作的列表
	const sta = (index) => {
		if(statelists[index].state){
			Payarr.push(statelists[index].id)
		}else{
			Payarr.splice(Payarr.indexOf(statelists[index].id),1)
		}
		if(statelists.some((item)=>item.state==false)){
			checked.value = false
		}else{
			checked.value = true
		}
	}
	// 待缴费明细
	const popupfree = ref(null)
	const seeDetail = () => {
		popupfree.value.open()
	}
	const Detailsclose = () => {
		popupfree.value.close()
	}
	// 待缴费全选全不选
	const allcheck = () => {
		// console.log(checked.value)
		Payarr.splice(0)
		if(checked.value){
			statelists.forEach((item,index)=>{
				item.state = checked.value
				Payarr.push(item.id)
			})
		}else{
			statelists.forEach((item)=>{
				item.state = checked.value
			})
		}
		
	}
	// 监听数据变化
	const subTotal = ref(0)
	const selectNum = ref(0)
	watch(statelists,(val,oldval)=>{
		subTotal.value = 0
		selectNum.value = 0
		val.forEach(item=>{
			if(item.state){
				subTotal.value += item.price
				selectNum.value += 1
			}
		})
	})
	const memberid = ref(0)
	const getInfo =(data)=> {
		console.log(data,5555)
		if(data.member_id){
			memberid.value = data.member_id
			statelists.splice(0)
			api('/apppayfrees',{
				userid:uni.getStorageSync('userid'),
				statusFree:statusFree.value,
				memberid:memberid.value
			}).then(res=>{
				console.log(res.dataes)
				statelists.push(...res.dataes)
			}).catch(err=>{
				console.log(err)
			})
		}else{
			memberid.value = 0
		}
	}
	// 去缴费
	const goFree = () => {
		console.log(111111111,Payarr)
		if(selectNum.value==0){
			uni.showToast({
				title:'请选择缴费项目',
				icon:'none'
			})
		}else{
			statelists.forEach((item)=>{
				console.log(Payarr.indexOf(item.id))
			})
		}
		
	}
	// 去详情
	const godetails = () => {
		uni.navigateTo({
			url:'/pages/Payment_details/Payment_details'
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 26rpx 25rpx 0;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 状态栏
		.statusbar{
			width: 100%;
			height: 82rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			overflow: hidden;
			border-radius: 16rpx;
			margin: 30rpx 0;
			.status{
				width: 50%;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				cursor: pointer;
			}
			.active{
				background-color: rgba(22, 119, 255, 1);
				color: #fff;
			}
		}
		// 状态内容切换
		.status_content{
			// 待缴费
			.Pending_payment{
				.paymentlist{
					width: 100% ;
					height: 340rpx;
					background-color: #fff;
					border-radius: 16rpx;
					padding-top: 30rpx;
					padding-right: 36rpx;
					box-sizing: border-box;
					margin-bottom: 40rpx;
					.registration{
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.code{
							padding-left: 28rpx;
							font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							font-weight: 700;
							color: #000;
							position: relative;
						}
						.code::before{
							content: '';
							width: 8rpx;
							height: 36rpx;
							border-radius: 16rpx;
							background-color:rgba(22, 119, 255, 1) ;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
					.registrationInfo{
						padding-left: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #333;
						margin-top: 26rpx;
						box-sizing: border-box;
					}
					.info{
						height: 40rpx;
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}
					.priceInfo{
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.details{
							color: #1677FF;
							cursor: pointer;
						}
					}
				}
				// 待缴费明细弹出层
				.popupFree{
					.popup-content{
						width: 100%;
						height: 830rpx;
						background-color: #fff;
						padding: 26rpx 50rpx;
						box-sizing: border-box;
						position: relative;
						.title{
							height: 40rpx;
							line-height: 40rpx;
							font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							font-weight: 700;
							font-size: 28rpx;
							width: 100%;
							text-align: center;
						}
						.close{
							width: 32rpx;
							position: absolute;
							right: 45rpx;
							cursor: pointer;
							top: 30rpx;
						}
						.paymentlists{
							margin-top: 60rpx;
							.payment_list{
								margin-bottom: 40rpx;
								.paykinds{
									display: flex;
									align-items: center;
									justify-content: space-between;
									.kind{
										display: flex;
										align-items: center;
										margin-bottom: 24rpx;
										.kindlogo{
											width: 46rpx;
											height: 42rpx;
											background-color: rgba(230, 244, 255, 1);
											border-radius: 4rpx;
											color: #1677FF;
											font-family: 'Microsoft YaHei UI', sans-serif;
											font-size: 24rpx;
											text-align: center;
											line-height: 42rpx;
										}
										.kinds{
											font-family: 'Microsoft YaHei UI', sans-serif;
											font-size: 28rpx;
											color: #000;
											margin-left: 18rpx;
										}
									}
									.subtotal{
										font-family: 'Microsoft YaHei UI', sans-serif;
										font-size: 28rpx;
										color: #000;
									}
								}
								.lists{
									font-family: 'Microsoft YaHei UI', sans-serif;
									font-size: 28rpx;
									color: #7f7f7f;
									.list{
										height: 40rpx;
										display: flex;
										align-items: center;
										justify-content: space-between;
										margin-bottom: 16rpx;
									}
								}
							}
						}
						.amounts{
							font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							font-size: 32rpx;
							font-weight: 700;
							width: 100%;
							text-align: right;
							margin-top: 60rpx;
						}
					}
				}
				// 底部结算栏
				.settlement{
					position: fixed;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 0 30rpx;
					box-sizing: border-box;
					height: 146rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.allselect{
						
						.allcheck,.total{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #333;
						}
						.total{
							color: #000;
							margin-top: 10rpx;
						}
					}
					.gofree{
						width: 210rpx;
						height: 80rpx;
						line-height: 80rpx;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1148.svg');
						background-size: cover;
						font-family: 'ArialMT', 'Arial', sans-serif;
						font-size: 24rpx;
						color: #fff;
						margin: 0 !important;
					}
				}
			}
			// 已缴费
			.Paid_already{
				.prompt{
					width: 100%;
					text-align: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					color: #7f7f7f;
					margin-bottom: 40rpx;
					margin-top: 40rpx;
				}
				// 缴费列表
				.paylists{
					padding-bottom: 40rpx;
					.paylist{
						width: 100%;
						height: 488rpx;
						background-color: #fff;
						border-radius: 16rpx;
						padding-top: 30rpx;
						padding-right: 36rpx;
						box-sizing: border-box;
						margin-bottom: 40rpx;
						.registration{
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.code{
								padding-left: 28rpx;
								font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
								font-size: 28rpx;
								font-weight: 700;
								color: #000;
								position: relative;
							}
							.code::before{
								content: '';
								width: 8rpx;
								height: 36rpx;
								border-radius: 16rpx;
								background-color:rgba(22, 119, 255, 1) ;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}
							.pay_status{
								width: 100rpx;
								height: 40rpx;
								// background-color: rgba(230, 255, 251, 1);
								border-radius: 8rpx;
								font-family: 'Microsoft YaHei UI', sans-serif;
								font-size: 24rpx;
								// color: #13C2C2;
								text-align: center;
								line-height: 40rpx;
							}
						}
						.registrationInfo{
							padding-left: 28rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #333;
							margin-top: 26rpx;
							box-sizing: border-box;
							.info{
								height: 40rpx;
								line-height: 40rpx;
								margin-bottom: 16rpx;
							}
							.godetails{
								width: 100%;
								height: 94rpx;
								margin-top: 32rpx;
								// padding-top: 8rpx;
								line-height: 94rpx;
								background-color: #fff;
								text-align: center;
								border-top: 2rpx solid rgba(242, 242, 242, 1);
								font-family: 'Microsoft YaHei UI', sans-serif;
								font-size: 28rpx;
								color: #1677FF;
							}
						}
						
					}
				}
			}
		}
	}       
</style>
